<template>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button type="primary" @click="$router.go(-1)">返回</el-button>
        <el-button type="primary" @click="save" v-if="this.type=='edit'">保存</el-button>
      </div>
      <div class="center">
        <div class="title" style="margin: 20px 0; font-size: 16px; font-weight: bold;">基本信息</div>
        <el-form 
        :inline="true" 
        :model="formData" 
        class="demo-form-inline" 
        label-width="140px" 
        :disabled="type=='detail'" 
        style="display: flex; justify-content:flex-start;flex-wrap: wrap;width: 90%;margin: 0 auto;"
        >
          <el-form-item label="创建时间：">
            <el-input v-model="formData.createTime" placeholder="请输入" disabled></el-input>          
          </el-form-item>
          <el-form-item label="仓库名称：">
            <el-input v-model="formData.warehouseName" placeholder="请输入" disabled></el-input>          
          </el-form-item>
          <el-form-item label="车间：">
            <el-input v-model="formData.remarks" placeholder="请输入" disabled></el-input>          
          </el-form-item>
          <el-form-item label="生效人：">
            <el-input v-model="formData.applyPerson" placeholder="请输入" disabled></el-input>          
          </el-form-item>
          <el-form-item label="入库类型：">
            <el-input v-model="formData.inOrOutTypeName" placeholder="请输入" disabled></el-input>          
          </el-form-item>

          <el-form-item label="入库单号：">
            <el-input v-model="formData.orderNumber" placeholder="请输入" disabled></el-input>          
          </el-form-item>
          <el-form-item label="关联单号：">
            <el-input v-model="formData.relateOrders" placeholder="请输入" disabled></el-input>          
          </el-form-item>
          <el-form-item label="领补套数：">
            <el-input v-model="formData.supplementNum" placeholder="请输入" disabled></el-input>          
          </el-form-item>
          <el-form-item label="物料名称：">
            <el-input v-model="formData.materialFields.name" placeholder="请输入" disabled></el-input>          
          </el-form-item>
          <el-form-item label="物料编码：">
            <el-input v-model="formData.materialFields.code" placeholder="请输入" disabled></el-input>          
          </el-form-item>
          <el-form-item label="计划数量：">
            <el-input v-model="formData.planAmount" type="number" @input="planQuantityChangeEvent" placeholder="请输入" ></el-input>          
          </el-form-item>
          <el-form-item label="实际数量：">
            <!-- <el-input v-model="formData.actualAmount" placeholder="请输入" disabled></el-input>           -->
            <el-input v-model="formData.actualAmount" placeholder="请输入" disabled></el-input>          
          </el-form-item>

          <el-form-item label="状态：">
          <el-select v-model="formData.stateName" placeholder="请选择">
            <el-option label="创建" value="1" disabled></el-option>
            <el-option label="生效" value="2"></el-option>
            <el-option label="完成" value="3" disabled></el-option>
            <el-option label="关闭" value="4"></el-option>
            <el-option label="取消" value="5"></el-option>
          </el-select>
        </el-form-item>


         
          <el-form-item label="审批状态：">
            <el-input v-model="formData.approvalStatusName" placeholder="请输入" type="textarea" :rows="2" disabled></el-input>
          </el-form-item>
        </el-form>

        
      </div>
      <div class="bottom">
        <div class="title" style="margin: 20px 0; font-size: 16px; font-weight: bold;" >物料信息</div>
        <el-table :data="datalist" style="width: 100%;" class="content-table-item" >
          <el-table-column prop="materialFields.code" label="物料编码" align="" width=""></el-table-column>
          <el-table-column prop="materialFields.name" label="物料名称" width=""></el-table-column>
          <el-table-column prop="materialFields.standard" label="规格名称" align="center" width=""></el-table-column>
          <el-table-column prop="materialFields.comp" label="物料单位" align="center" width=""></el-table-column>
          <el-table-column prop="planAmount" label="计划数量" align="center" width="">
            <template slot-scope="scope" >
                <el-input v-model="scope.row.planAmount" style="width: 80px;" :disabled="true"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="actualAmount" label="实际数量" align="center" width="" >
            <template slot-scope="scope">
                <el-input v-model="scope.row.actualAmount" style="width: 80px;" :disabled="true"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="materialFields.typeName" label="物料类型" align="center" width=""></el-table-column>
        </el-table>
      </div>
    </el-card>
  </template>
  <script>
  import { reqUpdateInStockCheck,reqProductOrderList } from "@/api/workOrder.js";
  import { reqFinishedOrderNum, reqSupplementNumByOrderNumber } from "@/api/warehouseEntry.js";
  import { cloneDeep } from "lodash";
  export default {
    data() {
      return {
        type:"",
        page:'',
        formData: {
          orderNumber: '',
          inOrOutTypeName: '',
          region:'',
          materialFields:{name:'',code:''}
        },
        datalist: [],
        jinyong:false
      }
    },
    mounted() {
      const data = this.$route.params.row
      this.datalist = [data]
    //   console.log(data, '=====')
      this.type = this.$route.params.type;
    //   console.log(this.type,'=====');
      this.formData=data
  if(this.type =='detail'){
     this.jinyong=true
  }
       this.findProductOrderListByMaterialCode();
    },
  methods: {
   save(){
    const { planAmount,actualAmount } = this.formData;
    const temp = cloneDeep(this.formData);
    console.log(temp);
    return;
    reqUpdateInStockCheck(temp).then(response => {
      if(response.data.code === 200){
        this.$notify.success({title: '提示',message:"更新成功"});
      }
      console.log('更新某条入库审核api',response);
    },error => {
      this.$notify.error({title: '提示',message:"更新失败，请重试"});
      console.log('更新某条入库审核api',error);
    })
   },

    //获取领补套数
    findProductOrderListByMaterialCode(){
      const materialCode = this.formData.materialFields.code;
      const relateOrders = this.formData.relateOrders;
      if(!materialCode){
        return;
      }
      reqProductOrderList(materialCode).then(async response => {
        if(response.data.code === 200){
          const list = response.data.data.content;
          const order = list.find(v => v.productOrderNumber === this.formData.relateOrders);
          const num = order.productOrderExtendFieldTen || order.productOrderMaterial.productOrderMaterialExtendFieldNine || order.productOrderMaterials[0].productOrderMaterialExtendFieldNine;
          this.formData.supplementNum = num;
          if(String(num).length === 0 || Number(num) == 0 || true){
            try {
                const n = await this.getSupplementNumByOrderNumber(relateOrders,materialCode);
                this.formData.supplementNum = n;
                console.log('获取到的领补套数:',n);
            } catch (error) {
                this.$notify.error({title: '提示',message: '请求获取订单领部套数出错,尝试刷新重试'});
                this.formData.supplementNum = 0;
            }
          }
          const { entryStoreQualifiedNum, entryStoreUnQualifiedNum } = await this.getFinishedOrderNum(this.formData.relateOrders);
          const restNum = Number(this.formData.supplementNum) - Number(entryStoreUnQualifiedNum) - Number(entryStoreQualifiedNum);
          this.formData.restNum = restNum;
          console.log('领补套数',num,'剩余数量 ===>',restNum)
        }
      }, error => {
        console.log("订单列表api",error);
      })
    },

    planQuantityChangeEvent(){
      const planAmount = this.formData.planAmount;
      const restNum = this.formData.restNum;
      const supplementNum = this.formData.supplementNum;
      if(Number(planAmount) > Number(restNum)){
        this.formData.planAmount = this.formData.planAmount.slice(0,-1);
        this.$notify.error({title: '提示',message: `计划数量不能大于关联单号的剩余数量${restNum},(剩余数量=领补套数数量-已入库合格及不合格数量)`});
        return;
      }
      this.formData.actualAmount = this.formData.planAmount;
    },
    getFinishedOrderNum(orderNumber){
        return new Promise((resolve,reject) => {
            reqFinishedOrderNum(orderNumber).then(response => {
                if(response.data.code === 200){
                    resolve(response.data.data);
                }
                console.log('请求订单完成数量',response);
            },error => {
                console.log('请求订单完成数量',error);
                reject(0);
            })

        })
    },
    //查询订单相关领补套数
    getSupplementNumByOrderNumber(orderNumber,materialCode = null){
      return new Promise((resolve,reject) => {
          reqSupplementNumByOrderNumber(orderNumber).then(response => {
              if(response.data.code === 200){
                  const list = response.data.data.details;
                  const tmp = list.map(v => {
                      return {materialCode:v['FMaterialId.FNUMBER'],supplementNum:v.FPickMtlQty};
                  })
                  console.log("查询到的领补套数list ===>",tmp);
                  let del = null;
                  if(materialCode && tmp.length !== 0){
                      const a = tmp.find(v => v.materialCode == materialCode);
                      if(a !== undefined){
                          del = a.supplementNum;
                      }
                  } else if(!materialCode && tmp.length === 1){
                      del = tmp[0].supplementNum;
                  }
                  resolve(del);
              }
              console.log('获取订单领补套数api',response);
          },error => {
              reject(error);
              console.log('获取订单领补套数api',error);
          })
      })
    }
  }
}
  </script>
  
  <style lang="scss" scoped>
  .el-input__inner {
    border-radius: 0 !important; //去掉圆角
  }
  .custom-input {
    width: 100%; /* 让输入框宽度占满父容器 */
  }
  .el-input, .el-select {
    width: 200px;
  }
  </style>
  